<template>
  <div class="background">
    <a-card style="margin-bottom: 10px">
      <a-row>
        <a-col :span="24">
          <a-form
            layout="inline"
            :form="form"
            @submit="handleSubmit"
          >
            <a-form-item label="人群包名称">
              <a-input
                allow-clear
                placeholder="请输入人群包名称"
                v-model="groupName"
              ></a-input>
            </a-form-item>
            <a-form-item label="归属渠道">
              <a-select
                style="width: 180px"
                placeholder="请选择归属渠道"
                v-model="distributeChannel"
                allow-clear
              >
                <a-select-option
                  :value="item.value"
                  v-for="(item,index) in chanelList"
                  :key="index"
                >
                  {{ item.name }}
                </a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item>
              <a-button
                type="primary"
                html-type="submit"
              >搜索</a-button>
              <a-button
                ghost
                type="primary"
                style="margin-left: 10px"
                @click="reset"
              >重置</a-button>
            </a-form-item>
          </a-form>
        </a-col>
      </a-row>
    </a-card>
    <a-card>
      <a-table
        bordered
        :loading="loading"
        :pagination="pagination"
        :columns="columns"
        :data-source="dataSource"
        @change="handleTableChange"
        :scroll="{ x: true }"
      >
        <span
          slot="distributeOrder"
          slot-scope="record"
        >
          <span v-if="record.distributeOrder != 0">{{record.distributeOrder}}</span>
        </span>
        <span
          slot="salesArea"
          slot-scope="record"
        >
          <a-tag
            v-for="(item,index) in record.salesAreaList"
            :key="index"
            :color="'blue'"
            style="margin-bottom:5px"
          >
            {{item}}
          </a-tag>
        </span>
         <span
          slot="tagItemId"
          slot-scope="record"
        >
        <template v-for="(item,index) in record.disItemList">
          <a-tag
            v-if="item.name"
            :key="index"
            :color="'orange'"
            style="margin-bottom:5px"
          >
            <span >{{item.name}}:{{item.tagItemId}}</span>
          </a-tag>
           </template>
        </span>
       
        <span
          slot="states"
          slot-scope="txt, record"
          style="margin-left:5px"
        >
          <span v-if="record.states == 'N'">
            未同步
          </span>
          <span v-else>
            已同步
          </span>
        </span>
        <template
          slot="action"
          slot-scope="txt, record"
        >
          <a
            class="mr-10"
            @click="addGroup(record)"
          >
            编辑
          </a>
          <a
            class="mr-10"
            @click="sync(record)"
          >
            同步
          </a>
          <!-- <a
            class="mr-10"
            @click="change(record)"
          >
           更新人群包
          </a> -->
        </template>
      </a-table>
      <create
        v-if="showAdd"
        :bag="bag"
        @close="close"
      ></create>
    </a-card>
  </div>
</template>

<script>
import create from './create.vue'
import { postAction } from '@/api/manage'
import { peopleList, syncPeople, changePeople } from '@api/label/index'

const columns = [
  {
    title: '人群包ID',
    width: 210,
    dataIndex: 'groupId'
  },
  {
    title: '人群包名称',
    width: 190,
    dataIndex: 'groupName'
  },
  {
    title: '分发渠道',
    width: 90,
    dataIndex: 'distributeChannel'
  },
  {
    title: '展示顺序',
    width: 90,
    scopedSlots: { customRender: 'distributeOrder' }
  },
  {
    title: '销售区域',
    scopedSlots: { customRender: 'salesArea' }
  },
  {
    title: '达摩标签ID',
    scopedSlots: { customRender: 'tagItemId' }

  },
  {
    title: '状态',
    width: 80,
    scopedSlots: { customRender: 'states' }
  },
  {
    title: '操作',
    width: 120,
    scopedSlots: { customRender: 'action' }
  }
]
const chanelList = [
  {
    value: 'member',
    name: '会员部'
  },
  {
    value: 'pos',
    name: 'POS+'
  },
  {
    value: 'integral',
    name: '积分商城'
  },
  {
    value: 'damo',
    name: '达摩'
  }
]
export default {
  components: {
    create
  },
  data() {
    return {
      columns,
      form: this.$form.createForm(this),
      jobNumber: '',
      showAdd: false,
      patt: 'api/gateway/basemgt-op',
      account: '',
      groupName: '',
      channel: '',
      loading: false,
      dataSource: [],
      distributeChannel: undefined,
      chanelList,
      retailDistribution: '',
      pagination: {
        total: 0,
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30', '40'],
        showQuickJumper: true,
        showSizeChanger: true,
        showTotal: total => `共 ${total} 条记录`,
        itemRender: (current, type, originalElement) => {
          if (type === 'prev') {
            return <a>上一页</a>
          } else if (type === 'next') {
            return <a>下一页</a>
          }
          return originalElement
        }
      }
    }
  },
  mounted() {
    this.loadData()
    // this.getBrandList();
  },

  methods: {
    handleTableChange(pagination) {
      this.pagination = pagination
      this.loadData()
    },
    close() {
      this.showAdd = false
      this.loadData()
    },
    addGroup(record) {
      this.showAdd = true
      this.bag = record
    },
    reset() {
      this.groupName = ''
      this.distributeChannel = ''
      this.retailDistribution = ''
      this.loadData()
    },
    handleSubmit(e) {
      e.preventDefault()
      this.loadData(1)
    },
    async sync(record) {
      this.$message.warning('数据开始同步，由于数据量较大，请耐心等候！')
      this.chanelList.map(item => {
        if (item.name == record.distributeChannel) {
          this.channel = item.value
        }
      })
      const params = {
        groupId: record.groupId,
        id: record.id,
        disItemList: record.disItemList,
        distributeChannel: this.channel
      }
      const res = await syncPeople('distribute', params)
      if (res.code == 200) {
        this.$message.success('同步成功')
        this.loadData()
      }
    },
    async change(record) {
      this.chanelList.map(item => {
        if (item.name == record.distributeChannel) {
          this.channel = item.value
        }
      })
      const params = {
        groupId: record.groupId,
        channel: this.channel
      }
      const res = await changePeople('init', params)
      if (res.data == 'success') {
        this.$message.success('更新成功')
        this.loadData()
      }
      // else {
      //   this.$message.warning(res.data)
      // }
    },
    async loadData(key) {
      this.loading = true
      const params = {
        pageNo: this.pagination.current,
        pageSize: this.pagination.pageSize,
        groupName: this.groupName,
        distributeChannel: this.distributeChannel,
        retailDistribution: this.retailDistribution
      }
      if (key) {
        params.pageNo = 1
      }
      try {
        const res = await peopleList('distribute', params)
        if (res.code == 200) {
          this.dataSource = res.data.peoplePackageDistribute
          this.pagination.total = res.data.count
        } else {
          this.$message.warning(res.msg)
        }
      } catch (error) {
      } finally {
        this.loading = false
      }
    }
  }
}
</script>
<style lang="less" scoped>
.background {
  background: transparent;
}
.mr-10 {
  margin-left: 10px;
}
</style>